<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YUOL周总结平台</title>
    <link rel="icon" href="../media/head/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/css/google-fonts.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/materialize.min.select.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/Material+Icons.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/font-awesome-4.7.0/css/font-awesome.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/editor.md-master/css/editormd.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/editor.md-master/css/editormd.logo.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" charset="UTF-8">
    <script type="text/javascript" charset="UTF-8">
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState == 'hidden') {
                normal_title = document.title;
                document.title = '暂时离开一会哦|･ω･｀)';
            } else document.title = normal_title;
        });
    </script>
</head>
<body>
    <nav class="nav nav-active" style="background-color: #03a9f4;position: fixed;z-index: 999;">
        <div class="nav-wrapper">
            <a href="/" class="brand-logo waves-effect waves-light"">
                &nbsp;周总结平台
            </a>
            <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down" style="list-style-type: none;">
                <li><a href="/" class="waves-effect waves-light"><i class="material-icons left">home</i>主页</a></li>
                <li><a href="/archive/" class="waves-effect waves-light"><i class="material-icons left">archive</i>本周总览</a></li>
                <li><a href="/person_list/" class="waves-effect waves-light"><i class="material-icons left">list</i>个人总览</a></li>
                <li><a href="/article_upload/" class="waves-effect waves-light btn"><i class="material-icons left">publish</i>上传周总结</a></li>
                <li><a href="/login/" class="waves-effect waves-light btn"><i class="material-icons left">storage</i>登录</a></li>
                {% if request.user.is_authenticated %}
                <li><a href="javascript:void(0)" class="waves-effect waves-light btn" id="logout" onclick="logout()"><i class="material-icons left">exit_to_app</i>注销</a></li>
                {% endif %}
            </ul>
        </div>
    </nav>
    <!-- 移动端侧栏 -->
    <ul class="sidenav" id="mobile-nav" style="list-style-type: none;">
        <li><a href="/" class="waves-effect waves-light"><i class="material-icons left">home</i>主页</a></li>
        <li><a href="/archive/" class="waves-effect waves-light"><i class="material-icons left">archive</i>本周总览</a></li>
        <li><a href="/person_list/" class="waves-effect waves-light"><i class="material-icons left">list</i>个人总览</a></li>
        <li><a href="/article_upload/" class="waves-effect waves-light"><i class="material-icons left">publish</i>上传周总结</a></li>
        <li><a href="/login/" class="waves-effect waves-light"><i class="material-icons left">dns</i>登录</a></li>
        {% if request.user.is_authenticated %}
        <li><a href="javascript:void(0)" class="waves-effect waves-light" id="logout2" onclick="logout()"><i class="material-icons left">exit_to_app</i>注销</a></li>
        {% endif %}
    </ul>
    <script type="text/javascript" charset="UTF-8">
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.sidenav');
            var instances = M.Sidenav.init(elems, 'left');
        });
    </script>
    <div class="fixed-action-btn" style="bottom: 56px;">
      <a class="btn-floating btn-large red waves-effect waves-light" title="回到顶部" id="to-top">
        <i class="large material-icons">keyboard_arrow_up</i>
      </a>
    </div>
    <script type="text/javascript" charset="UTF-8">
        document.getElementById('to-top').onclick = function () {
            var timer = null;
            cancelAnimationFrame(timer);
            //获取当前毫秒数
            var startTime = +new Date();
            //获取当前页面的滚动高度
            var b = document.body.scrollTop || document.documentElement.scrollTop;
            var d = 180;
            var c = b;
            timer = requestAnimationFrame(function func(){
                var t = d - Math.max(0,startTime - (+new Date()) + d);
                document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
                timer = requestAnimationFrame(func);
                if(t === d){
                  cancelAnimationFrame(timer);
                }
            });
        };
    </script>
    <main id="main" class="main">
        <form style="margin-top: 16px;margin-bottom: 16px;">
            {% csrf_token %}
            <div id="editormd">
                <textarea style="display: none;"></textarea>
            </div>
            <div class="row" style="max-width: 420px;">
                <div class="file-field input-field">
                    <div class="btn">
                        <span>word文档</span>
                        <input type="file" accept=".doc, .docx" id="doc" name="doc" required onchange="isEmpty()">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="或者上传本地word文档">
                    </div>
                </div>
                <div class="file-field input-field">
                    <div class="btn">
                        <span>md文档</span>
                        <input type="file" accept=".md" id="md" name="md" required onchange="isEmpty()">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="在线编辑器和本地md文档只能二选一">
                    </div>
                </div>
                <div class="input-field col s12">
                    <select id="member" style="display: none;" required onchange="isEmpty()">
                        <option value="" disabled selected>请选择您的名字</option>
                        {% for group in groups %}
                            <optgroup label="{{ group.group }}">
                            {% for member in group.member_set.all %}
                                <option value="{{ member.member }}">{{ member.member }}</option>
                            {% endfor %}
                            </optgroup>
                            {% empty %}
                            <option value="">没有成员</option>
                        {% endfor %}
                    </select>
                    <label>成员姓名</label>
                </div>
            </div>
            <div class="center">
                <button type="button" class="waves-effect waves-light btn" id="article-button" disabled>
                    <i class="material-icons left">send</i>上传周总结
                </button>
            </div>
        </form>
        <script type="text/javascript" charset="UTF-8">
            function isEmpty() {
                let editor_val = $('.editormd-markdown-textarea').val();
                let doc_val = $('#doc').val();
                let md_val = $('#md').val();
                let member = $('#member').val();
                if (editor_val !== ''  || doc_val !== '' || md_val !== '') {
                    if (editor_val !== '' && md_val !== '') {
                        alert('在线编辑器和本地md文档只能选择一个哦~');
                        $('#article-button').attr({"disabled":"disabled"});
                    }
                    else {
                        if (member !== null){
                            $('#article-button').removeAttr('disabled');
                        }
                        else {
                            $('#article-button').attr({"disabled":"disabled"});
                        }
                    }
                }
                else {
                    $('#article-button').attr({"disabled":"disabled"});
                }
            }
            document.addEventListener('DOMContentLoaded', function() {
                var elems = document.querySelectorAll('select');
                var instances = M.FormSelect.init(elems, '');
            });
        </script>
    </main>

    <footer class="page-footer" style="background-color: #03a9f4;padding-top: 0;">
        <div class="footer-copyright">
            <div class="container">
                <a class="white-text" href="http://online.yangtzeu.edu.cn/">@ 2019 - 长江大学在线信息传媒</a>
            </div>
        </div>
    </footer>

    <script src="/static/js/materialize.min.js" charset="UTF-8"></script>
    <script src="/static/js/jquery-3.3.1.min.js" charset="UTF-8"></script>
    <script src="/static/editor.md-master/editormd.min.js" charset="UTF-8"></script>
    <script type="text/javascript" charset="UTF-8">
        function logout() {
            $.ajax({
                type: "POST",
                url: "/api_logout/",
                data: {
                    signal: "OUT"
                },
                dataType: "json",
                success: function (data) {
                    if (data.status === "OK") {
                        //console.log(data);
                        alert('注销成功');
                        window.location.reload();
                    } else if (data.status === "WTF") {
                        alert('注销过程中出了一点问题');
                    }
                },
                error: function (jpXHR) {
                    alert("Status Code: " + jpXHR.status);
                },
            });
        }
        var editor = editormd("editormd", {
            path: "../static/editor.md-master/lib/",
            height: 640,
            emoji: true,
            taskList: true,
            tocTitle: "Content",
            tocm: true,
            tex: true,
            codeFold: true,
            htmlDecode: "style, script, iframe",
            saveHTMLToTextarea : true,
            flowChart: true,
            sequenceDiagram: true,
            onload: function () {
                console.log("onload=>", this.id, this.settings);
            },
            onchange: function () {
                //console.log("change");
                let editor_val = $('.editormd-markdown-textarea').val();
                let doc_val = $('#doc').val();
                let md_val = $('#md').val();
                let member = $('#member').val();
                if (editor_val !== ''  || doc_val !== '' || md_val !== '') {
                    if (editor_val !== '' && md_val !== '') {
                        alert('在线编辑器和本地md文档只能选择一个哦~');
                        $('#article-button').attr({"disabled":"disabled"});
                    }
                    else {
                        if (member !== null){
                            $('#article-button').removeAttr('disabled');
                        }
                        else {
                            $('#article-button').attr({"disabled":"disabled"});
                        }
                    }
                }
                else {
                    $('#article-button').attr({"disabled":"disabled"});
                }
            },
        });
        document.getElementById('article-button').onclick = function () {
            let member = $('#member').val();
            let editor_val = $('.editormd-markdown-textarea').val();
            let doc_val = $('#doc').val();
            let md_val = $('#md').val();

            let form = new FormData();
            form.append('member', member);
            form.append('md_code', editor_val);

            if (doc_val === '') {
                form.append('doc', doc_val);
            }
            else {
                let doc = document.getElementById('doc');
                let docFile = doc.files[0];
                form.append('doc', docFile);
            }

            if (md_val === '') {
                form.append('md', md_val);
            }
            else {
                let md =document.getElementById('md');
                let mdFile = md.files[0];
                form.append('md', mdFile);
            }

            $.ajax({
                type: 'POST',
                url: '/api_article_upload/',
                data: form,
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert(data.status.valueOf());
                    // console.log(data);
                },
                error: function (jpXHR) {
                    alert("Status Code: " + jpXHR.status);
                }
            });
        };
    </script>
</body>
</html>